<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米卡片</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background-color: #ccc;
    }

    .cart {
        height: 300px;
        width: 234px;
        margin: 100px auto;
        background-color: #fff;
        text-align: center;
        transition: all .4s;
    }

    .cart:hover {
        box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
    }

    .cart img {
        width: 160px;
        height: 160px;
    }

    .cart .title {
        font-size: 14px;
        font-weight: 400;
        color: #333;
        margin-top: 18px;
    }

    .cart .desc {
        font-size: 12px;
        color: #b0b0b0;
        padding: 0 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 0 5px;
    }

    .cart .price {
        color: #b0b0b0;
        margin-top: 10px;
    }

    .cart .price span {
        color: #ff6700;
    }
</style>

<body>
    <div class="cart">
        <img src="img/mi.webp" alt="">
        <p class="title">Xiaomi Buds 5</p>
        <p class="desc">舒适无感佩戴｜高通全链路无损音频｜哈曼 AudioEFX 联合调音</p>
        <p class="price">
            <span>659元</span>
            <del>699元</del>
        </p>
    </div>
</body>

</html>